import { h, init } from 'snabbdom'

// 返回值：patch函数，作用是对比链两个vnode的差异并更新到真实DOM
let pacth = init([])

// 创建虚拟DOM
// 第一个参数：标签+选择器
// 第二个参数 如果是字符串那就是标签中的内容（文字节点）
let vnode = h('div#container.cls', 'hello world')

let app = document.querySelector('#app')

// 第一个参数：（老节点）可以是vnode，也可以是DOM元素，内部会把DOM元素转换成VNode
// 第二个参数：（新节点）VNode
// 返回值： VNode
// 储存返回的 vnode，变量含义为相对老节点
let oldVnode = pacth(app, vnode)

// 此时 app 节点已被  vnode 的真实 DOM 节点替换

// 假设又有一个新的 vnode
vnode = h('div', 'Boom! Snabbdom')
oldVnode = pacth(oldVnode, vnode)

// 模拟异步任务更新DOM
setTimeout(() => {
  vnode = h('h1.title', '异步更新数据')
  oldVnode = pacth(oldVnode, vnode)
}, 2000)